<template>
  <div class="w-full aspect-video bg-background-900 rounded-xl flex items-center justify-center overflow-hidden relative group">
    <!-- 视频播放器 -->
    <video 
      v-if="movie.videoUrl && isSafeVideoUrl(movie.videoUrl)" 
      :src="movie.videoUrl" 
      controls 
      class="w-full h-full object-cover"
      :poster="movie.coverUrl"
      preload="metadata"
    ></video>
    
    <!-- 占位符界面 -->
     <div v-else class="w-full h-full relative">
      <img :src="movie.coverUrl" alt="电影封面" class="w-full h-full object-cover" />
      
      <!-- 播放按钮覆盖层 -->
      <div class="absolute inset-0 bg-background-900/30 flex items-center justify-center group-hover:bg-background-900/20 transition-all duration-normal">
        <div class="glass rounded-full p-6 group-hover:scale-110 transition-transform duration-normal cursor-pointer">
          <svg class="w-12 h-12 text-text-primary" fill="currentColor" viewBox="0 0 24 24">
            <path d="M8 5v14l11-7z"/>
          </svg>
        </div>
      </div>
      
      <!-- 虚构电影标识 -->
      <div class="absolute top-4 left-4 bg-gradient-fictional text-text-primary px-3 py-1 rounded-full text-sm font-medium">
        {{ movie.isAi ? 'AI生成' : '虚构电影' }}
      </div>
      
      <!-- 时长显示 -->
      <div class="absolute bottom-4 right-4 bg-background-900/70 text-text-primary px-2 py-1 rounded text-sm">
        {{ movie.duration || '00:00' }}
      </div>
      
      <!-- 全屏按钮 -->
      <UiButton 
        variant="ghost" 
        size="sm" 
        class="absolute bottom-4 left-4 bg-background-900/70 hover:bg-background-900/90"
      >
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
          <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
        </svg>
      </UiButton>
    </div>
    
    <!-- 加载状态 -->
    <div v-if="isLoading" class="absolute inset-0 bg-background-900/50 flex items-center justify-center">
      <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-500"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
import type { MovieDetail } from '../../types/ui'
import { UiButton } from '../ui'

const props = defineProps<{
  movie: MovieDetail
  isLoading?: boolean
}>()

// 允许的协议白名单，避免不安全的 scheme 注入
function isSafeVideoUrl(url: string): boolean {
  try {
    const parsed = new URL(url, window.location.origin)
    return parsed.protocol === 'http:' || parsed.protocol === 'https:'
  } catch {
    return false
  }
}
</script>